<template>
  <view>
    <view class="header">
      <text class="title">账号登陆</text>
      <view class="toTelLogin">
        <text>手机号登录</text>
        <image src="../../static/arrowRight.png"></image>
      </view>
    </view>
    <u--form :model="form" :rules="rules" ref="uform">
      <u-form-item prop="account" ref="item1"><u--input placeholder="请输入账号" border="bottom" v-model="form.account" clearable></u--input></u-form-item>
      <u-form-item prop="password" ref="item1">
        <u--input placeholder="请输入密码" border="bottom" :type="isShowPassword ? 'text' : 'password'" v-model="form.password">
          <image
            v-if="form.password"
            slot="suffix"
            :src="isShowPassword ? '/static/眼睛3@2x.png' : '/static/眼睛_闭@2x.png'"
            style="width: 16px;height: 16px;"
            @click="isShowPassword = !isShowPassword"
          ></image>
        </u--input>
      </u-form-item>
    </u--form>
    <u-button type="error" text="登录" shape="circle" class="btn" :disabled="form.account && form.password ? false : true" @click="onLogin"></u-button>
  </view>
</template>

<script>
  import {mapMutations} from 'vuex'
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      form: {
        account: 'hdsj001',
        password: '123456'
      },
      isShowPassword: false,
      rules: {
        account: {
          type: 'string',
          required: true,
          message: '请输入手机号',
          trigger: ['change']
        },
        password: {
          type: 'string',
          required: true,
          message: '请输入验证码',
          trigger: ['change']
        }
      }
    }
  },
  created() {},

  mounted() {},
  onLoad() {},
  methods: {
    ...mapMutations('login', ['setToken','removeToken']),
    async onLogin(){
      const {data:{data}} = await uni.$http.post('/login/account', {
        account:this.form.account,
        password:this.form.password
      })
      uni.setStorageSync('token', data)
      this.setToken(data)
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  width: 310px;
  margin: 50px auto 0;
  .title {
    font-size: 24px;
    font-weight: 700;
    color: #2a2929;
  }
  .toTelLogin {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #ef4f3f;
    image {
      width: 10px;
      height: 10px;
      margin-left: 7px;
    }
  }
}
.u-form {
  width: 310px;
  margin: 40px auto 0;
  .u-input {
    padding: 6px 0 !important;
  }
  .u-form-item__body__right__message {
    margin-left: 0 !important;
  }
}
.btn {
  width: 310px;
  height: 50px;
  background-color: #ef4f3f;
  margin-top: 45px;
}
</style>
